<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 对象.getAttribute('属性名')
    对象.setAttribute('属性名','//in.png')
    data-
    对象.dataset.属性名（不需要data前缀) = '  ' ;-->

    <!-- 事件：
    事件监听：绑定事件
    1.html属性处理 :需要在事件前 + on ，值就是事件处理程序（可以直接处理，也可以用函数调用脚本）
    2.DOM事件处理 ： 对象的属性
    3.DOM2事件处理 ： addEventListener()事件的注册 和 removeEventListener()事件的移除
     -->

        <!--（1） 直接处理 -->
    <!-- <button class = 'btn1' onclick="alert('感谢你的点击')">点我一下</button> -->
        <!--(2)调用脚本函数 -->
    <button class = 'btn1' onclick="show()">点我一下</button>
    <button class = 'btn2'>登入</button>
    <button class = "btn3">点击</button>
    <button class = "btn4">随机点名</button>
    <h3 id="font"></h3>
    
</body>
<script>
    let show = function(){
        alert('感谢你的点击!!!!!!');
    }
    const button1 = document.querySelector('.btn2');
    button1.onclick = function(){
        alert('欢迎登入'+this.className);
    }
    // 添加事件
    const button2 = document.querySelector('.btn3');
    button2.addEventListener('click',function(){ //事件处理方式
        alert('hello world');
    },false);
    //随机点名
    let Name = ['a','b','c','d','e']; 
    const clickName = document.querySelector('.btn4');
    clickName.addEventListener('click',showName(),false);
    //获取随机名字并显示到网页中
    function showName(){
        const h3Name = document.querySelector('#font');
        let num = Math.floor( Math.random() * Name.length);
        h3Name.innerHTML = Name[num];
    }
</script>
</html>